<template>
	<div class="login">
		<el-form class="form" :rules="rules" :model="form" ref="form">
			<h3>登录界面</h3>
			<el-form-item label="用户名" label-width="80px" prop="account"><el-input class="item" v-model="form.account"></el-input></el-form-item>
			<el-form-item label="密码" label-width="80px" prop="password"><el-input class="item" type="password" v-model="form.password"></el-input></el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">登录</el-button>
				<el-button class="regist" @click="onRegister">注册</el-button>
			</el-form-item>
		</el-form>
		<!-- 选择兴趣 -->
		<el-dialog title="选择你的兴趣爱好" :visible.sync="dialogFormVisible" @close="dump">
			<div class="hobby">
				<el-checkbox-group v-model="checkboxGroup" v-for="(item, index) in boxGroup" :key="index">
					<el-checkbox style="margin:10px;" :label="item" border></el-checkbox>
				</el-checkbox-group>
			</div>
			<el-input style="width: 98%;" placeholder="请输入内容" v-model="input" clearable @change="addHobby"></el-input>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
				<el-button @click="dialogFormVisible = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		/* 开发：写死密码 */
		return {
			form: {
				account: localStorage.getItem('account') ? localStorage.getItem('account') : '',
				password: localStorage.getItem('password') ? localStorage.getItem('password') : ''
			},
			rules: {
				account: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{
						min: 3,
						max: 12,
						message: '长度在 3 到 12 个字符',
						trigger: 'blur'
					}
				]
			},
			//兴趣爱好
			dialogFormVisible: false,
			checkboxGroup: [],
			boxGroup: ['运动', '音乐', '电影', '写作', '绘画', '乐器'],
			input: ''
		};
	},
	methods: {
		/* 表单提交 */
		onSubmit() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					this.login();
				} else {
					this.$message({
						message: '您的密码和账号位数不对',
						type: 'warning'
					});
					return false;
				}
			});
		},
		//注册
		onRegister() {
			this.$router.push({ path: 'register' }); //跳转到注册页面
		},

		//增加兴趣
		addHobby() {
			//传爱好，字符串 英文逗号隔开
			let boxGroup = this.boxGroup,
				input = this.input.trim(),
				checkboxGroup = this.checkboxGroup;
			if (boxGroup.indexOf(input) == -1) {
				boxGroup.push(input.trim());
			}
			checkboxGroup.push(input);
			this.input = '';
		},

		//给兴趣的跳转按钮
		dump() {
			let res = '';
			for (let i of this.checkboxGroup) {
				res += ',' + i;
			}
			this.$api.hobby({
				hobbies: res.slice(1),
				uid: localStorage.uid
			}).then(res=>{
				console.log(res);
			})
			this.$router.replace('/home');
		},

		//登录
		login() {
			this.$api.login(this.form.account, this.form.password).then(res => {
				console.log(res);
				if (res.code === 2000) {
					//账号密码错误
					this.$message({
						message: res.message,
						type: 'warning'
					});
				} else if (res.code === 200) {
					console.log(res);
					//账号密码正确
					this.$api.fistLogin(res.data).then(res => {
						localStorage.setItem('uid', res.data.id);
						localStorage.setItem('username', res.data.username);
						localStorage.setItem('login', true);
						localStorage.setItem('account', this.form.account);
						localStorage.setItem('password', this.form.password);
						localStorage.setItem('introduce', res.data.introduce);
						localStorage.setItem('portrait', res.data.portrait);
						if (res.data.firstLogin === 1) {
							//不是第一次登陆
							console.log(2);
							this.$router.replace('/home');
						} else {
							this.dialogFormVisible = true;
						}
					});
				}
			});
		}
	},
	created() {
		let login = this.$route.query.parm;
		if (login && login.username) {
			this.form.account = login.username;
			this.form.password = login.pwd;
		}
	},
	mounted() {
		document.getElementsByClassName('el-dialog')[0].style = 'top: 50%;transform: translateY(-50%); margin:auto;';
	}
};
</script>

<style scoped lang="scss">
.login {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url(../assets/background.jpg) no-repeat;

	.form {
		width: 40%;
		background-color: white;
		border-radius: 2px;
		padding: 5% 3%;
		border-radius: 25px;
		opacity: 0.9;
		.regist {
			background-color: #409eff;
			color: #fff;
		}
	}

	.hobby {
		display: flex;
		flex-wrap: wrap;
	}
}

.item {
	width: 75%;
}
</style>
